<template>
    <div class="bg">
        <nav-com title="提现" :showView='showView' @back="backHandler()"></nav-com>
        <van-row class="bg_m">
            <div class="bg_m_img">
                <ul>
                    <li>
                        <p>{{summary | amountFilter}}</p>
                        <span>累计收益</span>
                    </li>
                    <li>
                        <p>{{cash | amountFilter}}</p>
                        <span>当前可提</span>
                    </li>
                </ul>
            </div>
        </van-row>
        <van-row class="w_part2">
            <div class="bonus_part2_title"><span>提现金额</span></div>
            <div class="w_part2_box">
                <label>￥</label>
                <input type='text' @blur="moneyHandler(money)" v-model="money" placeholder="" />
            </div>
            <div class="w_part2_text" style="color:#f00;">
                {{message}}
            </div>
            <div class="w_part2_text">
                20元起提，请输入10的倍数,手续费5%
            </div>
        </van-row>
        <van-row class="w_part2" style="margin-top:8vw;">
            <div class="bonus_part2_title"><span>提现方式</span></div>
            <div class="w_part3_box">
                <ul>
                    <li style="border:1px solid #FF491F;">
                        <div>
                            <img src="../../assets/m8.png">
                        </div>
                        <div class="w_part3_card">
                            <p>银行卡</p>
                        </div>
                        
                    </li>
                    <li style="background:#f6f6f6;">
                        <div>
                            <img src="../../assets/m7.png">
                        </div>
                        <div class="w_part3_card">
                            <p style="color:#999; line-height:6.66vw;">支付宝</p>
                            <p style="color:#999; line-height:6.66vw;">即将上线</p>
                        </div>
                        
                    </li>
                </ul>
            </div>
        </van-row>
        <van-row class="w_part2" style="margin-top:8vw;">
            <div class="bonus_part2_title"><span>提现说明</span></div>
            <div class="text_1">
                <p>1.请于工作日每天9：00至21：00时间内提现</p>
                <p>2.单日最多提现1次，提现手续费5%</p>
                <p>3.起提金额为20元，且为10的倍数</p>
                <p>4.提现需人工审核，遇节假日顺延</p>
            </div>
        </van-row>
        <van-row class="w_part2" style="margin-top:6vw;">
            <van-button style="font-size:4.8vw; height:13.33vw;" @click="withdrawalHanlder" color="#FF491F" type="info" native-type='submit' round  block>提现</van-button>
        </van-row>
        <van-dialog v-model="showDialog" title="开卡提示" @confirm="handlerShowDialog" @cancel='cancelDialog' show-cancel-button confirmButtonText="进行校验" confirmButtonColor="#FF491F" >
            <div style="margin:4vw;">需要您先开通套餐，才能享受申请提现。已经开卡，直接进行校验即可</div>
        </van-dialog>
        <van-dialog v-model="failureDialog" title="欠费提示" @confirm="handlerfailureDialog" confirmButtonText="确认" confirmButtonColor="#FF491F" >
            <div style="margin:4vw;">你的卡号现在已欠费，请保证正常缴费，才能解除提现限制；补缴成功后，方可提现。</div>
        </van-dialog>
    </div>
</template>
<script>
import {getFttuserUserId,postwithdraws,getSummary,getMemberbankcards,getMemberidcards}  from '@/api/api'
import navCom from '@/component/nav'
export default {
    name:'withdrawal',
    components:{
        navCom
    },
    data() {
        return {
            showView:true,
            uid: weixin.getUserId(),
            list:[],
            value:'',
            showDialog:false,//开卡弹窗
            failureDialog:false,//欠费弹窗
            withdrawalDetails:{},
            money:'',
            message:'',
            summary:'',
            cash:'',
        }
    },
    mounted(){
        this.init()
    },
    
    
    methods:{
        //返回
        backHandler(){
            this.$router.go(-1)
        },
        //初始化
        init(){
            getFttuserUserId({userId:this.uid}).then(res=>{
                if(res.data.code == 200){
                    let fttData = res.data.data
                    //去开卡
                    if(fttData.cardzState =='pending' ){
                        // this.showDialog = true
                        this.memberidCardsHandle()
                    }else if(fttData.cardzState =='failure'){

                        this.failureDialog = true
                    }else if(fttData.cardzState == 'success'){
                        //实名认证验证
                        this.memberidCardsHandle()
                        
                    }
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
            
            getSummary({userId:this.uid}).then(res=>{
                if(res.data.code == 200){
                    let data = res.data.data
                    this.summary = data.pinmoney_bal + data.teamProfit_bal
                    this.cash = data.pinmoney_bal
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
            

        },
        //实名认证验证
        memberidCardsHandle(){
            getMemberidcards({userId:this.uid}).then(res=>{
                if(res.data.code == 200){
                    let memberData = res.data.data
                    if(memberData.state == "pending"){
                        this.$dialog.alert({
                            message:'你还没有实名认证，现在去实名认证',
                            showCancelButton: true
                        }).then(()=>{
                            this.$router.push('/realName')
                        }).catch(()=>{
                            this.$router.go(-1)
                        })
                    }else if(memberData.state == "failure"){
                        this.$dialog.alert({
                            message:'你实名认证失败，重新去实名认证',
                            showCancelButton: true
                        }).then(()=>{
                            this.$router.push('/realName')
                        }).catch(()=>{
                            this.$router.go(-1)
                        })
                    }else if(memberData.state == "success"){
                        //成功绑定银行卡
                        this.memberbankCardsHandle()
                    }
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
        },
        //绑定银行卡验证
        memberbankCardsHandle(){
            
            getMemberbankcards({userId:this.uid}).then(res=>{
                if(res.data.code === 200){
                    let data = res.data.data.rows[0]
                    if(data.state == 'pending'){
                        this.$dialog.alert({
                            message:'你还没有绑定成功银行卡，现在去绑定银行卡',
                            showCancelButton:true
                        }).then(()=>{
                            this.$router.push('/bndingBank')
                        }).catch(()=>{
                            this.$router.go(-1)
                        })
                    }else if(data.state == 'failure'){
                        this.$dialog.alert({
                            message:'你绑定银行卡失败，重新去绑定银行卡',
                            showCancelButton:true
                        }).then(()=>{
                            this.$router.push('/bndingBank')
                        }).catch(()=>{
                            this.$router.go(-1)
                        })
                    }else if(data.state == 'success'){
                        //成功
                    }
                }else{
                    this.$dialog.alert({
                        message:res.data.msg
                    }).then(()=>{
                        this.$router.push('/bndingBank')
                    }).catch(()=>{
                            this.$router.go(-1)
                        })
                }
            })
        },
        //金额验证
        moneyHandler(val){
            if(/\d/.test(val) && val % 10 == 0 && val >= 20 ){
                this.message =''
            }else {
                this.message = '请输入正确金额'
            }

        },
        //确认跳转
        handlerShowDialog(){
            this.$router.push('/card')
        },
        //欠费跳转
        handlerfailureDialog(){
            this.$router.push('/my')
        },
        //取消
        cancelDialog(){
             this.$router.push('/my')
        },
        //提现
        withdrawalHanlder(){
            postwithdraws({money:this.money}).then(res=>{
                
                if(res.data.code == 200){
                    this.$dialog.alert({
                        message:'提现成功'
                    })
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
        }
    }
}
</script>
<style scoped>
p {padding:0; margin:0;}
.bg {background: #fff; min-height: 100vh;}
.bg_m {padding-top:4vw;}
.bg_m_img {background: url('../../assets/m6bg.png'); background-size:100%; height:33.33vw; margin:0 5.3vw;}
.bg_m_img ul {display:flex; justify-content: space-around;}
.bg_m_img ul li {width:50%; color:#fff;}
.bg_m_img ul li p {font-size:5.8vw; margin-top:9.3vw; margin-left:4vw;}
.bg_m_img ul li span {font-size:3.2vw; margin-left:4vw;}
.w_part2 {margin-left:4vw; margin-right:4vw; background:#fff;}
.bonus_part2_title {margin-top:4vw; padding-bottom:4vw; display:flex;}
.bonus_part2_title span {font-size:5.3vw;}

.text_1 p {font-size:3.2vw; color: #A09894;}
.w_part2_box {border-bottom:1px solid #e1e1e1; padding-bottom:3vw;}
.w_part2_box label {font-size:4.8vw;}
.w_part2_box input {font-size:8vw; width:80%; border:none;}
.w_part2_text {margin-top:4.6vw; font-size:2.9vw; color:#A09894;}
.w_part3_box ul {display: flex; justify-content: space-around;}
.w_part3_box ul li {border-radius: 2.6vw; border:1px solid #e3e3e3; color:#333; width:30vw; height:13.33vw; line-height: 13.33vw;;}
.w_part3_box ul li img {width:4.5vw; height:4.5vw; float:left; margin-left:4.5vw; margin-top:4.5vw;}
.w_part3_card {padding-left:2.6vw; font-size:3.7vw; float:left;}


</style>
